<template>
      <div class="col-xs-12">
            <div class="input-group">
                  <input type="text" class="form-control input-sm" :style="{backgroundColor:inputColor}" :placeholder="param.name" v-model="computedInputValue">
                  <span class="input-group-btn">
                        <button class="btn btn-default btn-sm" type="button" style="width:100px;" @click="showModule()">{{buttonName}}</button>
                  </span>
            </div> 
      </div>
</template>
<script>
import prod from 'prod';
import jan from 'jan';
export default {
      name:'goodsComponent',
      data:function(){
            return {
                  janInputValue:undefined,
                  stratumInputValue:undefined,
                  //保存默认的group Name
                  inputEmptyValue:this.param.name.toString(),
                  //样式相关
                  buttonName:'商品選択',
                  inputColor:'',
                  //对象相关
                  prod:new prod(window.$),
                  // jan:new jan(window.$),
                  //显示对象
                  showObj:'',
                  prodValue:[],
                  janValue:[]
            };
      },
      props:{
            //{type:jan/stratum,value:选择的值,name:当前分组名,company:选择企业,mastType：company/suntory,mastClass:''}
            param:{
                  type:Object
            },
            type:{
                  type:String
            }
      },
      computed:{
            computedInputValue:{
                  get(){
                        if(this.type === 'jan'){
                              return this.janInputValue;
                        }else{
                              return this.stratumInputValue;
                        }
                  },
                  set(val){
                        if(this.type === 'jan'){
                              this.janInputValue = val===''?undefined:val;
                        }else{
                              this.stratumInputValue = val===''?undefined:val;
                        }
                        this.param.name = val === ''||val === undefined ? this.inputEmptyValue.toString() : val ;
                  }
            }
      },
      watch:{
            //监听param,当由空变为值时执行
            type(){
                  if(this.type === 'jan'){
                        this.showObj = this.jan; 
                        this.param.value = this.janValue;
                        this.buttonName = '単品選択';
                        this.janInputValue === '' ? (this.param.name = this.janInputValue):(this.param.name = this.inputEmptyValue);
                  }else{
                        this.showObj = this.prod;
                        this.param.value = this.prodValue;
                        this.buttonName = '商品選択';
                        this.stratumInputValue === '' ? (this.param.name = this.stratumInputValue):(this.param.name = this.inputEmptyValue);
                  }
                  this.basisValueCalcInputClass(this.param.value);
            },
            'param.company'(){
                  this.initModule();
            },
            'param.mastType'(){
                 this.initModule();
            },
            'param.mastClass'(){
                  this.initModule();
            },
            'param.value'(){
                  var localValue = this.type === 'jan'?this.janValue:this.prodValue;
                  if(this.param.value.join(',') !== localValue.join(',')){
                        //说明发生收藏赋值
                        this.prodValue = [];
                        this.janValue = [];
                        if(this.param.type === 'jan'){
                              this.showObj = this.jan;
                              this.showObj.setJan(this.param.value);
                              this.janValue = this.param.value;
                        }else{
                              this.showObj = this.prod;
                              this.showObj.setProd(this.param.value);
                              this.prodValue = this.param.value;
                        }
                  }
            },
            prodValue(){
                  this.type === 'stratum' ?this.param.value = this.prodValue : '';
                  this.basisValueCalcInputClass(this.param.value);
            },
            janValue(){
                  this.type === 'jan' ?this.param.value = this.janValue : '';
                  this.basisValueCalcInputClass(this.param.value);
            }
      },
      methods:{
            //初始化module
            initModule(){
                  this.setParamForInitModule('jan','janValue','jan');
                  this.setParamForInitModule('prod','prodValue','stratum');
                  this.prodValue = [];
                  this.janValue = [];
            },
            setParamForInitModule(moduleObj,value,type){
                  var vm = this;
                  var initParam = {
                        usercd: global.userCd,
                        elementId: '',
                        level: 'l-m-s-t',
                        sakeflg:'0'
                  };
                  if(this.param.mastType === 'suntory'){
                        initParam.mstclass = this.param.mastClass;
                        initParam.kigyoucd = global.suntoryCd;
                  }else{
                        initParam.mstclass = '0000';
                        initParam.kigyoucd = this.param.company;
                  }
                  if(type === 'jan'){
                        initParam.callback={
                              afterSelectedOK:function(){
                                    vm[value] = vm[moduleObj].getJans();
                              }
                        };
                  }else{
                       initParam.callback={
                              afterSelectedOK:function(){
                                    vm[value] = vm[moduleObj].getProds();
                              }
                        };
                  };
                  vm[moduleObj].init(initParam);
            },
            showModule(){
                  this.showObj.show();
            },
            basisValueCalcInputClass(obj){
                  if(obj.length > 0 ){
                        this.buttonName = '選択済み';
                        this.inputColor='#BBFFFF';
                  }else{
                        this.type === 'jan'?this.buttonName = '単品選択':this.buttonName = '商品選択';
                        this.inputColor='';
                  }
            }
      },
      mounted(){
            this.showObj = this.prod;
            this.param.value = this.prodValue;
            this.initModule();
      }
};
</script>